<template>
	<el-row>
		<el-col class="top">
			<label>患者信息</label>
		</el-col>
		<el-col>
			<el-row class="dateBar">
				<el-col>
					<el-date-picker
					v-model="timeRange"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
					<el-button type="primary" @click="getStatistic">确定</el-button>
				</el-col>
			</el-row>
		</el-col>
		<el-col>
			<el-row>
				<el-col class="infoTitle">
					<el-row>
						<el-col :span="18">
							<i class="el-icon-menu"></i>患者信息统计<span class="timeRange">{{timeString}}</span>
						</el-col>
						<el-col :span="6" class="actionBtn">
							<el-button-group>
								<el-button type="primary" size="small" disabled>结果导出</el-button>
								<el-button type="primary" size="small" disabled>结果打印</el-button>
							</el-button-group>
						</el-col>
					</el-row>
				</el-col>
				<el-col>
					<table class="infoTable">
						<thead>
							<tr>
								<th>总人数</th>
								<th>男患者人数</th>
								<th>女患者人数</th>
								<th>120人数</th>
								<th>绿色通道人数</th>
								<th>14岁以下</th>
								<th>15—39岁</th>
								<th>40—59岁</th>
								<th>60—79岁</th>
								<th>80岁以上</th>
								<th>平均逗留时间</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>{{allData.allCount?allData.allCount:'-'}}</td>
								<td>{{allData.maleCount?allData.maleCount:'-'}}</td>
								<td>{{allData.femaleCount?allData.femaleCount:'-'}}</td>
								<td>{{allData.from120?allData.from120:'-'}}</td>
								<td>{{allData.fromGreen?allData.fromGreen:'-'}}</td>
								<td>{{allData.age14_0?allData.age14_0:'-'}}</td>
								<td>{{allData.age15_39?allData.age15_39:'-'}}</td>
								<td>{{allData.age40_59?allData.age40_59:'-'}}</td>
								<td>{{allData.age60_79?allData.age60_79:'-'}}</td>
								<td>{{allData.age80_?allData.age80_:'-'}}</td>
								<td>{{allData.avgStay?allData.avgStay:'-'}}</td>
							</tr>
						</tbody>
					</table>
				</el-col>
				<el-col class="tips">
					<span>*</span>注意：当患者数据录入不全时，会出现分量之和小于总量的情况
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>
<script type="text/javascript">
	export default{
		name:'PatientInfo',
		data(){
			return {
				timeRange:[new Date((new Date()).getTime()-3600*1000*24*1),new Date()],
				timeString:"",
				curUser:{},
				allData:{}
			}
		},
		mounted(){
			if (this.$cookies.get("curUser")) {
				this.curUser = this.$cookies.get("curUser");
			}
		},
		methods:{
			getStatistic:function(){
				var vm = this;
				var startTime = new Date();
				var lastTime = new Date((new Date()).getTime()-3600*1000*24*1);
				if (vm.timeRange.length==2) {
					startTime = vm.timeRange[0];
					lastTime = vm.timeRange[1];
				}
				vm.setTimeString();
				var hospitalCode = vm.curUser.hospitalCode;
				this.$axios.getPatientData(vm.commonUtil.dateFormat(startTime,"yyyy-MM-dd hh:mm:ss"),vm.commonUtil.dateFormat(lastTime,"yyyy-MM-dd hh:mm:ss"),hospitalCode).then(function(res){
					if (res.data&&res.data.data) {
						vm.allData = res.data.data;
					}
				},function(res){
					console.log("error:"+res);
				});
			},
			setTimeString:function(){
			let vm = this;
			if (vm.timeRange.length==2) {
				let startTime = vm.timeRange[0];
				let lastTime = vm.timeRange[1];
				vm.timeString = "("+vm.commonUtil.dateFormat(startTime,"yyyy-MM-dd hh:mm:ss")+" 至 "+vm.commonUtil.dateFormat(lastTime,"yyyy-MM-dd hh:mm:ss")+")";
			}else{
				vm.timeString ="";
			}
		}
		}
	}
</script>
<style type="text/css" scoped>
	.top{
		font-weight: bolder;
		line-height: 45px;
		height: 45px;
		border-bottom: 1px dashed #eeeeee;
	}
	.dateBar{
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.infoTable{
		 width:100%;
		 table-layout:fixed;
		 border-right: solid 1px #000000;
		 border-bottom: solid 1px #000000;
		 border-collapse: collapse;
		 text-align: center;
		 line-height: 45px;
		 font-size: 14px;
	}
	.infoTable th{
		border-left: solid 1px #000000;
		border-top: solid 1px #000000;
		background-color: lightblue;
	}
	.infoTable td{
		border-left: solid 1px #000000;
		border-top: solid 1px #000000;
	}
	.infoTitle{
		font-weight: bolder;
		color: #000000;
		margin-top: 30px;
		text-align: left;
		line-height: 45px;
	}
	.actionBtn{
		text-align: right;
		padding-right: 10px;
	}
	.tips{
		font-size: 10pt;
		font-weight: lighter;
		color: #888888;
		margin-bottom: 45px;
		margin-top: 10px;
		text-align: left;
	}
	.tips span{
		color: #FF0000;
	}
	.timeRange{
		font-weight: lighter;
	}
</style>